<%-- 
    Document   : lokasi
    Created on : Nov 12, 2013, 12:03:42 AM
    Author     : Shin
--%>

<%@page import="java.sql.*"%>
<html>
    <head>  
        <script language="javascript" type="text/javascript">
            var xmlHttp
            var xmlHttp
            function showState(str) {
                if (typeof XMLHttpRequest != "undefined") {
                    xmlHttp = new XMLHttpRequest();
                }
                else if (window.ActiveXObject) {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                if (xmlHttp == null) {
                    alert("Browser does not support XMLHTTP Request")
                    return;
                }
                var url = "state.jsp";
                url += "?count=" + str;
                xmlHttp.onreadystatechange = stateChange;
                xmlHttp.open("GET", url, true);
                xmlHttp.send(null);
            }

            function stateChange() {
                if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
                    document.getElementById("state").innerHTML = xmlHttp.responseText
                }
            }

            function showCity(str) {
                if (typeof XMLHttpRequest != "undefined") {
                    xmlHttp = new XMLHttpRequest();
                }
                else if (window.ActiveXObject) {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                if (xmlHttp == null) {
                    alert("Browser does not support XMLHTTP Request")
                    return;
                }
                var url = "city.jsp";
                url += "?count=" + str;
                xmlHttp.onreadystatechange = stateChange1;
                xmlHttp.open("GET", url, true);
                xmlHttp.send(null);
            }
            function stateChange1() {
                if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
                    document.getElementById("city").innerHTML = xmlHttp.responseText
                }
            }

            function showDesa(str) {
                if (typeof XMLHttpRequest != "undefined") {
                    xmlHttp = new XMLHttpRequest();
                }
                else if (window.ActiveXObject) {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                if (xmlHttp == null) {
                    alert("Browser does not support XMLHTTP Request")
                    return;
                }
                var url = "desa.jsp";
                url += "?count=" + str;
                xmlHttp.onreadystatechange = stateChange2;
                xmlHttp.open("GET", url, true);
                xmlHttp.send(null);
            }
            function stateChange2() {
                if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
                    document.getElementById("desa").innerHTML = xmlHttp.responseText
                }
            }
        </script>  
    </head>  
    <body>  
        <table border="1">
            <tr><th>Provinsi</th><th>Kabupaten/Kota</th><th>Kecamatan</th><th>Desa</th></tr>
            <tr><td>
                    <select name='country' onchange="showState(this.value)">  
                        <option value="none">Select</option>  
                        <%
                            Class.forName("com.mysql.jdbc.Driver").newInstance();
                            Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/hepo", "root", "");
                            Statement stmt = con.createStatement();
                            ResultSet rs = stmt.executeQuery("Select * from provinsi");
                            while (rs.next()) {
                        %>
                        <option value="<%=rs.getString(1)%>"><%=rs.getString(2)%></option>  
                        <%
                            }
                        %>
                    </select> 
                </td>
                <td id='state'><select name='state' >  
                        <option value='-1'></option>  
                    </select>
                </td>
                <td id='city'> <select name='city' >  
                        <option value='-1'></option>  
                    </select>   
                </td>
                <td id='desa'> <select name='desa' >  
                        <option value='-1'></option>  
                    </select>   
                </td>
            </tr>
        </table>
    </body> 
</html>